@use "sass:map";

// 所有变量均在common/var文件中
@use './common/var.scss' as *;
// 所有混入均在mixins/var文件中
@use  './mixin/_var.scss' as *;

/*  #ifndef  APP-NVUE  */
// 根元素全局css变量
page {
	// 表示可以使用操作系统亮色配色方案渲染元素。详见https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-scheme
	// 要使用暗黑模式则需加载dark/css-vars.scss这个样式表
	color-scheme: light;

	// 暗黑模式将会替换以下四个css变量的值
	// Background --e-bg-color-#{$type}
	@include set-component-css-var('bg-color', $bg-color);
	// --e-text-color-#{$type}
	@include set-component-css-var('text-color', $text-color);
	// --e-border-color-#{$type}
	@include set-component-css-var('border-color', $border-color);
	// Fill --e-fill-color-#{$type}
	@include set-component-css-var('fill-color', $fill-color);

	@include set-css-var-value('color-primary', $color-primary);
	@include set-css-var-value('color-success', $color-success);
	@include set-css-var-value('color-warning', $color-warning);
	@include set-css-var-value('color-error', $color-error);
	@include set-css-var-value('color-info', $color-info);

	// get rgb
	// @each $type in (primary, success, warning, error, info) {
	//   @include set-css-color-rgb($type);
	// }

	// @for $i from 1 through 9 {
	//   @include set-css-color-type-light("primary", $i);
	// }
	// @include set-css-var-value(
	//   ("color-primary", "dark-2"),
	//   map.get($colors, "primary", "dark-2")
	// );

	// color
	// --e-color-#{$type}
	// --e-color-#{$type}-light-{$i}
	// @each $type in (success, warning, error, info) {
	//   @include set-css-color-type($type);
	// }

	// Disable样式
	@include set-component-css-var('disabled', $disabled);

	// 字体样式
	@include set-component-css-var('font-size', $font-size);
	// @include set-css-var-value("font-weight-primary", 500);
	// @include set-css-var-value("font-line-height-primary", 24px);
	// Border
	@include set-css-var-value('border-width', $border-width);
	@include set-css-var-value('border-style', $border-style);
	@include set-css-var-value('border-color-hover', $border-color-hover);
	@include set-css-var-value('border', #{var(--e-border-width) var(--e-border-style) var(--e-border-color)});
	// --e-border-radius-#{$type}
	@include set-component-css-var('border-radius', $border-radius);

	@include set-component-css-var('transition-duration', $transition-duration);

	@include set-component-css-var('transition-function', $transition-function);
	@include set-component-css-var('transition', $transition);
	@include set-component-css-var('select', $select);
	@include set-component-css-var('option', $option);
	@include set-component-css-var('switch', $switch);
}

/*  #endif  */
